import React, { Component } from 'react';
import { connect } from 'dva';
import { Table, Input, Button, Row, Col, Select, DatePicker, Form, TreeSelect, Modal, Popover, Icon, Popconfirm } from 'antd';
import ProductsModal from './ProductsModal';

import check from '../../utils/checkLib';
import SkuTable from './SkuTable';
import styles from './Products.less';
const FormItem = Form.Item;

@window.regStateCache
class ResponsePurchase extends Component {

  constructor() {
    super();

  }
    handleSubmit(e, page, pageSize) {
   const { responsePageSize } = this.props;
       // 清除多选
    this.setState({}, () => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        const payload = { ...values,pageIndex: typeof page === 'number' ? page : 1, pageSize: pageSize || responsePageSize,}
        	this.props.dispatch({
          type: 'products/queryPurchaseResponseList',
          payload,
        });

      });
    });
  }



  interator(arr, value, data = []) {
    const p = this;
    arr.forEach((el) => {
      if (el.id.toString() === value) data.push(el);
      else if (el.children.length) p.interator(el.children, value, data);
    });
    return data;
  }
  handleEmptyInput(type) { // 清空内容
    const { setFieldsValue } = this.props.form;
    switch (type) {
      case 'name': setFieldsValue({ name: undefined }); break;
      case 'skuCode': setFieldsValue({ skuCode: undefined }); break;
      default: return false;
    }
  }

    showClear(type) { // 是否显示清除按钮
    const { getFieldValue } = this.props.form;
    const data = getFieldValue(type);
    if (data) {
      return <Icon type="close-circle" onClick={this.handleEmptyInput.bind(this, type)} />;
    }
    return null;
  }
  render() {
    const p = this;
    const { form, responseList = [],responsePage, responsePageSize,responseTotal,} = this.props;
    const { getFieldDecorator, resetFields } = form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    const columns = [
      { title: '采购任务名称',
        dataIndex: 'taskTitle',
        key: 'taskTitle',
        width: 80,
      render(text) { return text || '-'; } },
      { title: '商品名称', dataIndex: 'name', key: 'name', width: 100 },
      { title: 'UPC', dataIndex: 'skuUpc',key: 'skuUpc',width: 80},
      { title: 'SKU代码', dataIndex: 'skuCode',key: 'skuCode',width: 80},
      { title: '颜色', dataIndex: 'color',key: 'color',width: 80},
      { title: '尺寸', dataIndex: 'scale',key: 'scale',width: 80},
      { title: '商品图片',
        dataIndex: 'skuPic',
        key: 'skuPic',
        width: 80,
        render(text) {
          if (!text) return '-';
          const picList = JSON.parse(text).picList;
          const t = picList.length ? picList[0].url : '';
          return (
            t ? <Popover title={null} content={<img role="presentation" src={t} style={{ width: 400 }} />}>
              <img role="presentation" src={t} width={60} height={60} />
            </Popover> : '-'
          );
        },
     },
      { title: '货源状态', dataIndex: 'caseName', key: 'caseName', width: 100, render(text) { return text || '-'; } },
      { title: '货源详情', dataIndex: 'caseDetail', key: 'caseDetail', width: 100, render(text) { return text || '-'; } },
      { title: '买手名称', dataIndex: 'buyerName', key: 'buyerName', width: 80, render(text) { return text || '-'; } },
      { title: '日期', dataIndex: 'gmtCreate', key: 'gmtCreate', width: 80, render(text) { return text || '-'; } },
    ];

    const paginationProps = {
      total: responseTotal,
      defaultPageSize: 20,
      showSizeChanger: true,
      pageSizeOptions: ['20', '50', '100', '200', '500'],
      onShowSizeChange(current, size) {
        p.handleSubmit(null, 1, size);
      },
      current: responsePage,
      onChange(pageIndex) {
        p.handleSubmit(null, pageIndex, responsePageSize);
      },
    };


    return (
      <div>
     <div className="refresh-btn"><Button type="ghost" size="small" onClick={this._refreshData.bind(this)}>刷新</Button></div>
       <Form onSubmit={this.handleSubmit.bind(this)}>
          <Row gutter={20} style={{ width: 800 }}>
            <Col span="8">
              <FormItem
                label="SKU代码"
                {...formItemLayout}
              >
                {getFieldDecorator('skuCode', {})(
                  <Input placeholder="请输入SKU代码" suffix={p.showClear('skuCode')} />)}
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem
                label="商品名称"
                {...formItemLayout}
              >
                {getFieldDecorator('name', {})(
                  <Input placeholder="请输入商品名称" suffix={p.showClear('name')} />)}
              </FormItem>
            </Col>
          </Row>
          <Row style={{ marginLeft: 13,marginBottom:10}}>
            <Col className="listBtnGroup">
              <Button htmlType="submit" size="large" type="primary">查询</Button>
              <Button size="large" type="ghost" onClick={() => resetFields()}>清空</Button>
            </Col>
          </Row>
        </Form>
        <Row>
          <Col className="table-wrapper">
            <Table
              columns={columns}
              dataSource={responseList}
              bordered
              size="large"
              rowKey={record => record.id}
              pagination={paginationProps}
            />
          </Col>
          <Col className="table-placeholder" />
        </Row>
      </div>
    );
  }
}

function mapStateToProps(state) {
  const { responseList, responseTotal,responsePage,responsePageSize, } = state.products;
  return {
    responseList,
    responseTotal,
    responsePage,
    responsePageSize
  };
}

export default connect(mapStateToProps)(Form.create()(ResponsePurchase));
